<template>
    <div class="m-order">
        <el-row class="mb40">
            <el-col :span="5">
                <div class="order-list">
                    <dl>
                        <dt>
                            <a href="javascript:;">我的订单</a>
                        </dt>
                        <dd>
                            <p>
                                <a href="javascript:;">全部订单</a>
                                <i class="icon-right"></i>
                            </p>
                            <p>
                                <a href="javascript:;">待付款</a>
                                <i class="icon-right"></i>
                            </p>
                            <p>
                                <a href="javascript:;">待使用</a>
                                <i class="icon-right"></i>
                            </p>
                            <p>
                                <a href="javascript:;">待评价</a>
                                <i class="icon-right"></i>
                            </p>
                        </dd>
                    </dl>
                    <dl>
                        <dt>
                            <a href="javascript:;">我的收藏</a>
                        </dt>
                        <dd>
                            <p>
                                <a href="javascript:;">收藏的商家</a>
                                <i class="icon-right"></i>
                            </p>
                            <p>
                                <a href="javascript:;">收藏的团购</a>
                                <i class="icon-right"></i>
                            </p>
                        </dd>
                    </dl>
                </div>
            </el-col>
            <el-col :span="19">
                <div class="order-info">
                    <el-tabs v-model="activeName">
                        <el-tab-pane label="全部订单" name="first">
                            <list></list>
                        </el-tab-pane>
                        <el-tab-pane label="待付款" name="second">
                            <list></list>
                        </el-tab-pane>
                        <el-tab-pane label="待使用" name="third">
                            <list></list>
                        </el-tab-pane>
                        <el-tab-pane label="待评价" name="fourth">
                            <list></list>
                        </el-tab-pane>
                    </el-tabs>
                </div>
            </el-col>
        </el-row>
        <navbar></navbar>
    </div>
</template>

<script>
import navbar from '@/components/index/navbar.vue'
import list from '@/components/order/orderlist.vue'

export default{
    data(){
        return{
            activeName: 'first'    
        }
    },
    components:{
        navbar,
        list   
    }
}
</script>

<style lang="less">
    @import '../assets/less/order/order.less';
</style>

